<!--素材选择框-->
<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="modalTitle"
      width="900px"
      wrapClassName="j-user-select-modal"
      @ok="handleOk"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <a-row>
        <a-col :span="showSelected ? 18 : 24">
          <BasicTable
            :columns="columns"
            :bordered="true"
            :useSearchForm="true"
            :formConfig="formConfig"
            :api="getMaterialList"
            :searchInfo="searchInfo"
            :rowSelection="rowSelection"
            :indexColumnProps="indexColumnProps"
            :beforeFetch="beforeFetch"
            v-bind="getBindValue"
          />
        </a-col>
        <a-col :span="showSelected ? 6 : 0">
          <BasicTable
            v-bind="selectedTable"
            :dataSource="selectRows"
            :useSearchForm="true"
            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }"
          >
            <!--操作栏-->
            <template #action="{ record }">
              <a href="javascript:void(0)" @click="handleDeleteSelected(record)"><Icon icon="ant-design:delete-outlined" /></a>
            </template>
          </BasicTable>
        </a-col>
      </a-row>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, h } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMaterialList } from './mp.api';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { selectProps } from '/@/components/Form/src/jeecg/props/props';

  export default defineComponent({
    name: 'MaterialSelectModal',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '素材选择',
      },
      appid: {
        type: String,
        default: '',
      },
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit, refs }) {
      //注册弹框
      const [register, { closeModal }] = useModalInner();
      const attrs = useAttrs();
      //表格配置
      const config = {
        canResize: false,
        bordered: true,
        size: 'small',
        rowKey: 'code',
      };
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
        getMaterialList,
        getBindValue
      );
      const searchInfo = ref(props.params);
      //查询form
      const formConfig = {
        labelCol: {
          span: 8,
        },
        baseColProps: {
          xs: 24,
          sm: 10,
          md: 10,
          lg: 10,
          xl: 10,
          xxl: 10,
        },
        schemas: [
          // {
          //   label: 'appid',
          //   field: 'appid',
          //   defaultValue: props.appid,
          //   component: 'Input',
          //   show: false,
          // },
          {
            label: '素材名称',
            field: 'name',
            component: 'JInput',
            colProps: { span: 10 },
          },
        ],
      };
      // 请求之前对参数做处理
      const beforeFetch = function (params) {
        params.appid = props.appid;
      };
      //定义表格列
      const columns = [
        {
          title: '素材ID',
          dataIndex: 'mediaId',
          width: 40,
        },
        {
          title: '素材标题',
          dataIndex: 'content',
          width: 160,
          customRender: ({ text, values }) => {
            let html = '';
            for (let index = 0; index <= values.articles.length; index++) {
              const item = values.articles[index];
              html += '<div>' + index + 1 + '.' + item.title + '</div>';
            }

            return h(
              'span',
              {
                innerHTML: html,
                //style: 'text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:' + rows + '; -webkit-box-orient:vertical;',
              },
              []
            );
          },
        },
        {
          title: '日期',
          dataIndex: 'updateTime',
          width: 80,
        },
      ];
      //已选择的table信息
      const selectedTable = {
        pagination: false,
        showIndexColumn: false,
        scroll: { y: 390 },
        size: 'small',
        canResize: false,
        bordered: true,
        rowKey: 'id',
        columns: [
          {
            title: '素材名称',
            dataIndex: 'name',
            width: 40,
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: 40,
            slots: { customRender: 'action' },
          },
        ],
      };
      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }
      return {
        handleOk,
        getMaterialList,
        register,
        visibleChange,
        getBindValue,
        formConfig,
        beforeFetch,
        indexColumnProps,
        columns,
        rowSelection,
        selectedTable,
        selectRows,
        handleDeleteSelected,
      };
    },
  });
</script>
